<template>
  <!--pages/extend/index.wxml-->
  <view>
    <cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">发票</block>
    </cu-custom>

    <view>
      <view class="invoice-list">
        <view @tap="clickInvoice" data-type="no" id="0" class="noneed-invoice">
          <checkbox class="blue round" :checked="noInvoiceCheck"></checkbox>
          <text class="margin-left">不需要发票</text>
        </view>
        <empty
          v-if="!invoiceList.length"
          imgUrl="fp.png"
          title="您还没有发票信息哦"
          btnText="新增发票信息"
          path="/pages_grid/pages/users/order-addinvoice/index"
          jumpType="1"
        ></empty>
        <view class="info" v-if="invoiceList.length">发票信息</view>
        <view class="pl32 pr32">
          <view
            v-for="(item, index) in invoiceList"
            :key="index"
            :id="index"
            data-type="yes"
            @tap="clickInvoice"
            class="item"
          >
            <view>
              <checkbox v-model="item.checked" class="blue round"></checkbox>
              <text
                class="ml32"
                :class="item.type == 1 ? 'unit' : 'individual'"
                >{{ item.type == 1 ? "单位" : "个人" }}</text
              >
              <text class="ml16">{{ item.rise }}</text>
            </view>

            <view>
              <text
                @tap.stop="changeInvoice(item)"
                :data-invoice="item"
                class="cuIcon-write f40"
              ></text>
              <text
                @tap.stop="deleteInvoice(item)"
                :data-invoice="item"
                class="cuIcon-delete ml32 f40"
              ></text>
            </view>
            <!-- <view class="margin-left invoice-msg">
            <view>
              <text
                class="cu-tag sm bg-green radius margin-right-xs text-xs text-white"
                >{{ item.type == 1 ? "单位" : "个人" }}</text
              >
              <text class="overflow">{{ item.rise }}</text>
            </view>
            <view v-if="item.tax">{{ item.tax }}</view>
          </view>
          <view class="invoice-icon">
            <text
              @tap.stop="changeInvoice(item)"
              :data-invoice="item"
              class="cuIcon-write"
            ></text>
            <text
              @tap.stop="deleteInvoice(item)"
              :data-invoice="item"
              class="cuIcon-delete"
            ></text>
          </view>-->
          </view>
        </view>
      </view>

      <view class="compile" v-if="invoiceList.length">
        <navigator
          hover-class="none"
          url="/pages_grid/pages/users/order-addinvoice/index"
        >
          <view
            class="cu-btn block margin-tb-sm lg round text-df"
            style="margin-bottom: 40rpx"
			:class="'bg-'+theme.backgroundColor"

          >
            <text class="cuIcon-roundadd"></text>新增发票信息
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import api from "utils/api";
const util = require("utils/util.js");
export default {
  data() {
    return {
      theme: app.globalData.theme, //全局颜色变量
      page: {
        searchCount: false,
        current: 1,
        size: 20,
      },
      parameter: {},
      invoiceList: [],
      noInvoiceCheck: false,
    };
  },
  mounted() {
    let that = this;
    this.getInvoiceList();
    uni.$on("invoice", function (data) {
      that.getInvoiceList();
    });
  },
  methods: {
    clickInvoice(e) {
      //选中
      let index = e.currentTarget.id;
      let type = e.currentTarget.dataset.type;
      var pages = getCurrentPages(); // 获取页面栈
      var currPage = pages[pages.length - 1]; // 当前页面
      var prevPage = pages[pages.length - 2]; // 上一个页面
      if (type == "yes") {
        let result = null;
        this.invoiceList = this.invoiceList.map((item, idx) => {
          index == idx ? (item.checked = true) : (item.checked = false);
          return item;
        });
        result = this.invoiceList.filter((item, idx) => {
          if (index == idx) {
            return item;
          }
        });
        this.noInvoiceCheck = false;
        prevPage.$vm.setInvoice(0, result);
        uni.navigateBack({
          delta: 1,
        });
      } else {
        let result = null;
        (this.invoiceList = this.invoiceList.map((item) => {
          item.checked = false;
          return item;
        })),
          (result = this.invoiceList.filter((item, idx) => {
            if (index == idx) {
              return item;
            }
          }));
        this.noInvoiceCheck = true;
        prevPage.$vm.setInvoice(1);
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    getInvoiceList() {
      //获取发票列表
      api
        .getInvoicePage(
          Object.assign({}, this.page, util.filterForm(this.parameter))
        )
        .then((res) => {
          this.invoiceList = res.data.records;
        });
    },
    changeInvoice(item) {
      //修改
      uni.navigateTo({
        url:
          "/pages_grid/pages/users/order-addinvoice/index?index=1&id=" +
          item.id +
          "&type=" +
          item.type,
      });
    },
    deleteInvoice(item) {
      //删除
      let that = this;
      uni.showModal({
        title: "删除",
        content: "确定删除吗?",
        success(e) {
          if (e.confirm) {
            api.delInvoice(item.id).then((res) => {
              if (res.code == 0) {
                uni.showToast({
                  title: "删除成功",
                  duration: 2000,
                  icon: "none",
                });
                that.getInvoiceList();
              }
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 16rpx;
  width: 100%;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.overflow_top {
  border: 2rpx solid blue !important;
}

.overflow {
  font-size: 28rpx !important;
}

.add-invoice {
  width: 100%;
  height: 140rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  justify-content: center;
  color: blue;
}

.add-invoice text {
  margin-right: 4rpx;
}

.invoice-list {
  padding-bottom: 140rpx;
}

.noneed-invoice {
  background: #fff;
  padding: 32rpx 32rpx;
}

.info {
  padding: 32rpx;
  font-size: 34rpx;
}

.need-invoice {
  padding: 20rpx;
  margin-bottom: 2rpx;
}

.invoice-title {
  padding: 20rpx 0;
}

.invoice-msg {
  width: 500rpx;
}

.invoice-msg > view:nth-child(1) {
  display: flex;
  align-items: center;
}

.invoice-msg > view:nth-child(1) > text:nth-child(1) {
  font-size: 20rpx;
  padding: 0rpx 6rpx;
  // border: 2rpx solid var(--blue);
  border-radius: 4rpx;
  // color: var(--blue);
}

.invoice-msg > view:nth-child(1) > text:nth-child(2) {
  font-size: 32rpx;
  font-weight: 600;
  margin-left: 8rpx;
  width: 400rpx;
}

.invoice-msg > view:nth-child(2) {
  margin-top: 8rpx;
  font-size: 30rpx;
}

.invoice-icon {
  font-size: 36rpx;
}

.invoice-icon text {
  padding: 16rpx;
}

.compile {
  /* position: fixed; */
  /* width: 100%; */
  /* position: absolute; */
  /* bottom: 0; */
}

.compile .cu-btn {
  width: 690rpx;
  margin: 0 auto;
}

.cu-btn.lg {
  font-size: 28rpx;
}

.unit {
  background: #63d0d1;
  padding: 10rpx 32rpx;
  display: inline-block;
  color: #fff;
  border-radius: 50rpx;
}

.individual {
  background: #406cff;
  padding: 10rpx 32rpx;
  display: inline-block;
  color: #fff;
  border-radius: 50rpx;
}
</style>
